<!--header str-->
{template "common","header"}
<!--header end-->
<script type="text/javascript" src="{JS_PATH}jquery.form.min.js"></script>
<script type="text/javascript" src="{JS_PATH}formvalidator.js" charset="UTF-8"></script>
<script type="text/javascript" src="{JS_PATH}formvalidatorregex.js" charset="UTF-8"></script>
<script type="text/javascript" src="{JS_PATH}layer/layer.min.js"></script>
<style>
    .btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;
        *display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;
        *line-height:20px;color:#fff;
        text-align:center;vertical-align:middle;cursor:pointer;background:#5bb75b;
        border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;
        border-bottom-color:#b3b3b3;-webkit-border-radius:4px;
        -moz-border-radius:4px;border-radius:4px;}

    .btn input{position: absolute;top: 0; right: 0;margin: 0;border:solid transparent;
        opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
    .progress{position:relative; margin-left:100px; margin-top:-24px;
        width:200px;padding: 1px; border-radius:3px; display:none}
    .bar {background-color: green; display:block; width:0%; height:20px;
        border-radius:3px; }
    .percent{position:absolute; height:20px; display:inline-block;
        top:3px; left:2%; color:#fff }
    .files{height:22px; line-height:22px; margin:10px 0}
    .delimg{margin-left:20px; color:#090; cursor:pointer}


    tr{height:40px;}
    .i{width:200px;height:30px;}
    .i100{width:100px;height:30px;}
    textarea{width:400px;height:80px;}
    .reqired{width:50px;font-size:14px;}

</style>
<!--wrap_activity str-->
<div class="wrap" id="wrap">
    <table>
        <tr>
            <td class="item_table_left">
                <br/><br/>
                {template "common","left_menu"}
            </td>
            <td class="item_table_right">
                <div class="wrap_main">
                    <div class="bullet more_height">
                        <div class="bullet_title"><label class="user_detail_title heiti">个人信息</label></div>
                        <div class="bullet_menu more_bottom">
                            <label class="user_detail_menu">&lt;&lt;修改资料</label>
                        </div>
                    </div>
                    <hr>
                    <div class="content_title">{$info[title]}</div>
                    <div class="content">
                        <form action="/index.php?m=hchmember&c=detail&a=userinfo" method="post"  enctype="multipart/form-data">
                            <table>
                                <tr>
                                    <td><h3>我的名片</h3></td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width=80><label class="reqired">* 我的姓名：</label></td>
                                    <td width=250><input class="i" placeholder="姓名" type="text" value="{$userinfo[nickname]}" name="item[nickname]" id="nickname" required="required"></td>
                                    <td><label class="reqired">*我的性别：</label></td>
                                    <td width=300>
                                        <input type="radio" value="1" name="detail[sex]" id="sex" {if $detail['sex']==1} checked="checked" {/if}>男
                                        &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="2" name="detail[sex]" id="sex" {if $detail['sex']==2} checked="checked" {/if}>女
                                    </td>
                                    <td rowspan="5">
                                        <div id="user_project_upload">
                                            {if $userinfo[avatar]}
                                            <div id="showimg"><img src='{$userinfo[avatar]}' height='100'></div>
                                            {else}
                                            <div id="showimg"><img src='/statics/images/member/nophoto.gif' height='100'></div>
                                            {/if}
                                            <div class="btn">
                                                <span>添加图片</span>
                                                <input id="fileupload" type="file" name="mypic">
                                            </div>
                                            <div></div>
                                            <div class="progress">
                                                <span class="bar"></span><span class="percent">0%</span >
                                            </div>
                                            <div class="files"></div>
                                            <input type="hidden" value="{$userinfo[avatar]}" name="item[avatar]" id="img" readonly="readonly">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label class="reqired">* 我的学历：</label></td>
                                    <td>
                                        <select class="i">
                                            <option>最高学历</option>
                                            <option>博士及以上</option>
                                            <option>研究生</option>
                                            <option>大学</option>
                                            <option>高中及以下</option>
                                        </select>
                                    </td>
                                    <td><label class="reqired">*工作经验：</label></td>
                                    <td colspan="3">
                                        <select class="i">
                                            <option>工作经验</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label class="reqired">* 手机号码：</label></td>
                                    <td colspan="3"><input class="i" placeholder="手机号码" type="text" value="{$userinfo[mobile]}" name="item[mobile]" id="mobile"></td>
                                </tr>
                                <tr>
                                    <td><label class="reqired">&nbsp;&nbsp;我的邮箱：</label></td>
                                    <td colspan="3"><input class="i" placeholder="邮箱地址" type="text" value="{$userinfo[email]}" name="item[email]" id="email"></td>
                                </tr>
                                <tr>
                                    <td><label class="reqired">&nbsp;&nbsp;是否会员：</label></td>
                                    <td colspan="3">

                                        <input type="radio" value="1" >是
                                        &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="2" >否
                                        <a href="#">会员认证</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td colspan="3"><input class="i" placeholder="会员号：1234567890" type="text" value="会员号：1234567890" readonly="readonly"></td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td colspan="3">
                                        <input class="i" type="submit" name="dosubmit" class="submit" value="保存" width="200" height="30"/>
                                        <input type="hidden" name="m" value="hchmember">
                                        <input type="hidden" name="c" value="detail">
                                        <input type="hidden" name="a" value="userinfo">
                                    </td>
                                </tr>
                            </table>
                        </form>
                        <hr>
                        <form action="/index.php?m=hchmember&c=detail&a=userinfo" method="post"  enctype="multipart/form-data">
                            <table>
                                <tr>
                                    <td><h3>工作经验</h3></td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width=80><label class="reqired">&nbsp;&nbsp;公司名称：</label></td>
                                    <td>
                                        <input class="i" placeholder="公司名称" type="text" value="{$detail[company]}" name="detail[company]" id="company">
                                        &nbsp;&nbsp;&nbsp;&nbsp;<input class="i" placeholder="职位名称" type="text" value="{$detail[company]}" name="detail[company]" id="company">
                                    </td>
                                    <td>+</td>
                                </tr>
                                <tr>
                                    <td><label class="reqired">&nbsp;&nbsp;工作年限：</label></td>
                                    <td colspan="3">
                                        <select class="i100">
                                            <option>开始年份</option>
                                            <option>2015</option>
                                            <option>2014</option>
                                            <option>2013</option>
                                            <option>2012</option>
                                        </select>
                                        <select class="i100">
                                            <option>开始月份</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>7</option>
                                            <option>8</option>
                                            <option>9</option>
                                            <option>10</option>
                                            <option>11</option>
                                            <option>12</option>
                                        </select>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <select class="i100">
                                            <option>结束年份</option>
                                            <option>2015</option>
                                            <option>2014</option>
                                            <option>2013</option>
                                            <option>2012</option>
                                        </select>
                                        <select class="i100">
                                            <option>结束月份</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>7</option>
                                            <option>8</option>
                                            <option>9</option>
                                            <option>10</option>
                                            <option>11</option>
                                            <option>12</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td><label class="reqired">&nbsp;&nbsp;具体内容：</label></td>
                                    <td colspan="3">
                                        <textarea placeholder="具体工作内容" rows="" cols=""></textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>
                                        <input class="i" type="submit" name="dosubmit" class="submit" value="保存" width="200" height="30"/>
                                        <input type="hidden" name="m" value="hchmember">
                                        <input type="hidden" name="c" value="detail">
                                        <input type="hidden" name="a" value="userinfo">
                                    </td>
                                </tr>
                            </table>
                        </form>
                        <br style="clear: both;">
                    </div>
                </div>
            </td>
        </tr>
    </table>



</div>
<!--wrap end-->
<!--footer str-->
{template "common","footer"}
<!--footer end-->
<script type="text/javascript">
    if( !('placeholder' in document.createElement('input')) ){

        $('input[placeholder],textarea[placeholder]').each(function(){
            var that = $(this),
                    text= that.attr('placeholder');
            if(that.val()===""){
                that.val(text).addClass('placeholder');
            }
            that.focus(function(){
                if(that.val()===text){
                    that.val("").removeClass('placeholder');
                }
            })
                    .blur(function(){
                        if(that.val()===""){
                            that.val(text).addClass('placeholder');
                        }
                    })
                    .closest('form').submit(function(){
                        if(that.val() === text){
                            that.val('');
                        }
                    });
        });
    }

    ///////////////////////////

    function uploadImage() {
        $.ajax({
            type: "POST",
            url: "/?m=hchindex&c=upload&a=img",
            data: { imgPath: $("#uploadFile").val() },
            cache: false,
            success: function(data) {
                if(data.err == '0'){
                    $('#user_project_img').src=data.url
                }else{
                    alert(data.msg);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("上传失败，请检查网络后重试");
            }
        });
    }

    $(function () {
        var bar = $('.bar');
        var percent = $('.percent');
        var showimg = $('#showimg');
        var progress = $(".progress");
        var files = $(".files");
        var btn = $(".btn span");
        $("#fileupload").wrap("<form id='myupload' action='/?m=hchindex&c=upload&a=img' method='post' enctype='multipart/form-data'></form>");
        $("#fileupload").change(function(){ //选择文件
            $("#myupload").ajaxSubmit({
                dataType:  'json', //数据格式为json
                beforeSend: function() { //开始上传
                    showimg.empty(); //清空显示的图片
                    //progress.show(); //显示进度条
                    var percentVal = '0%'; //开始进度为0%
                    bar.width(percentVal); //进度条的宽度
                    //percent.html(percentVal); //显示进度为0%
                    btn.html("上传中..."); //上传按钮显示上传中
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%'; //获得进度
                    bar.width(percentVal); //上传进度条宽度变宽
                    //percent.html(percentVal); //显示上传进度百分比
                },
                success: function(data) { //成功
                    //获得后台返回的json数据，显示文件名，大小，以及删除按钮
                    //files.html("<b>"+data.name+"("+data.size+"k)</b><span class='delimg' rel='"+data.pic+"'>删除</span>");
                    //显示上传后的图片
                    var img = "./uploadfile/"+data.pic;
                    showimg.html("<img src='"+img+"' id='user_project_img' height='100'>");
                    $("#img").val(img);
                    btn.html("添加图片"); //上传按钮还原
                },
                error:function(xhr){ //上传失败
                    btn.html("上传失败");
                    bar.width('0');
                    files.html(xhr.responseText); //返回失败信息
                }
            });
        });
    });

</script>
</body>
</html>